<template>
	<view class="index-setting__item-box">
		<view class="index-setting__item flex">
			<text class="index-setting__item-title">{{props.item.title}}</text>
			<view class="index-setting__item-btn flex" v-if="props.isSet">
				<!-- <text class="index-setting__item-btn-text">已显示导航</text> -->
				<image src="/static/more--grey.png" mode="aspectFill" class="index-setting__item-btn-icon"></image>
			</view>
		</view>
		
		<!-- 底部弹窗 -->
<!-- 		<view ref="popup"  class="index-setting__item-popup">
			<text class="index-setting__item-popup-title">
				证书查询
			</text>
		</view> -->
		
		<!-- 底部弹窗 -->
<!-- 		<uni-popup ref="popup" type="bottom"  class="index-setting__item-popup" v-if="props.isSet">
			<view class="index-setting__item-popup-content flex-column">
				<text class="index-setting__item-popup-title">{{props.item.title}}</text>
				<view class="index-setting__item-popup-set">置顶</view>
				<view class="index-setting__item-popup-set flex">
					<text class="index-setting__item-popup-set-text">显示在导航栏</text>
					<switch checked="true" color="#02b041" />
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script setup>
	import { ref} from 'vue'
const props = defineProps({
	item:Object,
	isSet:{
		typeof:Object,
		default:true
	}
})

const popup = ref(null);

function onClickOpen(){
	// console.log('pop',popup.value)
	// console.log('弹窗')
	// popup.value.open();
}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
		align-items: center;
	}
	
	.flex-column{
		display: flex;
		flex-direction: column;
	}
	
	.index-setting__item-box{
		
	}
	
	.index-setting__item{
			// width: 95%;
			width: 560rpx;
			height: 90rpx;
			border-bottom: 2rpx solid #f7f7f7;
			// margin: 0 auto;
			box-sizing: border-box;
			padding-left: 50rpx;
			padding-right: 20rpx;
			// background-color: red;
			justify-content: space-between;
			
			&-title{
				width: fit-content;
				font-size: 30rpx;
			}
			
			&-btn{
				&-text{
					color: #878787;
					font-size: 32rpx;
				}
				&-icon{
					width: 30rpx;
					height:30rpx;
				}
			}
			
			// &-popup{
			// 	width: 100%;
			// 	&-content{
			// 		width: 100%;
			// 		height: 600rpx;
			// 		background-color: #fff;
			// 		color: #000;
			// 		border-top-left-radius: 10px;
			// 		border-top-right-radius: 10px;
			// 		align-items: center;
			// 		margin-bottom: -100rpx;
			// 	}
				
			// 	&-title{
			// 		font-size: 48rpx;
			// 		// text-align: center
			// 		font-weight: 200;
			// 		margin: 1em 0;
			// 	}
				
			// 	&-set{
			// 		width: 600rpx;
			// 		height: 120rpx;
			// 		line-height: 120rpx;
			// 		background-color: #f7f7f9;
			// 		box-sizing: border-box;
			// 		padding: 0 50rpx;
			// 		justify-content: space-between;
			// 		margin-bottom: 10rpx;
			// 	}
			// }
		}

		@media screen and (min-width: 600px) {
			.index-setting__item{
				padding-left: 30rpx;
				&-title{
					font-size: 3vw;
				}
			}
		}
</style>